<template>
    <div class="shop">
        <!-- 头部 -->
        <div class="header-content" >
             <yd-navbar :title=cheng>
                <router-link to="/" slot="left">
                    <yd-icon name="home" size="25px" color="#777"></yd-icon>
                </router-link>
                <router-link to="/mine" slot="right">
                    <yd-icon name="ucenter-outline" size="25px" color="#777"></yd-icon>
                </router-link>
            </yd-navbar>
        </div>
        <h3>我的购物车:</h3>
        <!-- 菜单 -->
       <yd-checklist v-model="checklist4" :label="false" ref="checklistDemo">
        <yd-checklist-item :val="item.id" v-for="(item,i) in list" :key="item.id">
            <yd-flexbox style="padding: 15px 0;">
                <img :src="item.url" class="demo-checklist-img">
                <yd-flexbox-item align="top">
                   <em style="font-weight:700">{{item.name}}</em><br/>
                   轻薄美观的拍照手机/ 标配蛟龙660 /AIE处理器<br>
                        <div class="calculation">
                            <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                                <div class="ball" v-show="flag" ></div>
                                </transition>
                            <div class="plus" @click="plusShop(i)">-</div>
                            <div class="number">{{item.number}}</div>
                            <div class="reduce" @click="reduceShop(i)">+</div>

                        </div>
                    <p>
                        <span style="color:red;float:left">单价格：￥<em>{{item.price}}</em></span>
                        <span  style="color:red;float:left">&nbsp;&nbsp; 小计:{{item.price*item.number}}元</span> 
                        <span  style="color:red;float:right" @click="delectshop"> 删除</span>
                    </p>
                </yd-flexbox-item>
            </yd-flexbox>
        </yd-checklist-item>
    </yd-checklist>

 <div class="cart-shop">
     <div class="shop-left">
         总计:{{totalPrice}}元  
     </div> 
     <yd-badge slot="badge" type="danger"> 数量:8</yd-badge>
     <div class="shop-right">
          
        <div>任性买({{list.length}})</div> 
     </div>
 </div>
 </div>
</template>
<script>

export default {
     data() {
         return {
            cheng:"购物车" ,
            checklist4: [],
            spinner1:0,
             flag:false,
            list:[
                {id:"0",name:"小米play",url:"//i1.mifile.cn/a1/pms_1545457703.71734471!220x220.png",price:"2999",number:"1"},
                {id:"1",name:"小米1",url:"//i1.mifile.cn/a1/pms_1545457703.71734471!220x220.png",price:"2344",number:"1"},
                {id:"2",name:"小米2",url:"//i1.mifile.cn/a1/pms_1545457703.71734471!220x220.png",price:"3425",number:"1"},
                {id:"3",name:"小米3",url:"//i1.mifile.cn/a1/pms_1545457703.71734471!220x220.png",price:"2886",number:"1"}
                ]
         }
     },
    beforeRouteEnter (to, from, next) {
        next(vm =>{
           vm.$parent.$data.showfooter=false
           vm.$parent.$data.showmenu=false
        })
    },
   beforeRouteLeave (to, from, next) {
            this.$parent.$data.showfooter=true
            this.$parent.$data.showmenu=true
           next()
    },
    computed: {
        totalPrice(){
            let total=0;
            for(const key in this.list){
                  total += this.list[key].price*this.list[key].number
            }
            return total
        }
    },
     methods: {
      plusShop(i){
       this.list[i].number==1? "":this.list[i].number--
      },
      reduceShop(i){
       this.list[i].number++
       this.flag=!this.flag
      },
      delectshop(i){
      this.list.splice(i,1)
      },
       beforeEnter(el){
               el.style.transform="translate(100px,0)"
            },
            enter(el,done){
               el.offsetHeight;
               el.style.transform="translate(100px,620px)";
               el.style.transition="2s ease 0s";
               done()
            },
            afterEnter(el){
               this.flag=!this.flag
            }

     },
     components:{
       //nerbarComponent,
       //tabbarComponent  
     }
}
</script>
<style scoped>
 .ball{
     	width: 10px;
     	height: 10px;
     	border-radius: 50%;
     	background-color: #f00;
     }
.header-content{
    position: absolute;
    width:100% ;
    top: 0;
    left:0;
}
.demo-checklist-img{
    width:40%;
}
h3{
    font-size: 16px;
    color: blueviolet;
    margin: 5px;
}
.yd-checklist-item{
    margin: 5px;
}
 .plus{
    width: 40px;
    height: 20px;
    font-size: 16px;
    background-color: aquamarine;
    text-align: center;
    cursor: pointer;
}
/* .reduce{
    float: right;
    width: 40px;
    height: 20px;
    font-size: 16px;
    background-color: aquamarine;
    text-align: center;
    cursor: pointer; 
}  */
.calculation{
    margin: 10px;
    display:flex;
    align-items:center;
    justify-content:space-around;  
}

.reduce{
  width: 40px;
    height: 20px;
    font-size: 16px;
    background-color: aquamarine;
    text-align: center;
    cursor: pointer;   
}
.cart-shop{
    background-color: rgba(0, 0, 0, .3);
    height:65.2px ;
    margin: 0 8.33px 8.33px;
    position:fixed;
    z-index:999 ;
    font-size: 16px;
    width: 96%;
    left: 0;
    bottom:0;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2) ;
    border-radius:8.333px;
    border:1px solid #ccc;
    display:flex;
    align-items:center;
    justify-content:space-around;
}
.shop-left{

}
.shop-right{
    width: 40%;
    border-radius:8px; 
    height:60% ;
   text-align: center;
   line-height: 37.91px;
    background-color: #ff6700;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}

</style>
